<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  
  <body>
    <input type="button" value="发送请求Get" onclick="sendGet()">
    <input type="button" value="发送请求Post" onclick="sendPost()">
    <input type="button" value="发送请求Axios" onclick="sendAxios()">
    <input type="button" value="发送请求All_Spread" onclick="sendAllSpread()">
  </body>
  
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
  <script>
    // axios.get(url[, config])
    function sendGet() {
      // 局部配置
      const ins = axios.create({
        baseURL: 'http://localhost:9000/back_end_get'
      });
      ins.get('/params?query_name=query').then(res => {
        console.log(res); // {data: {…}, status: 200, statusText: 'OK', headers: AxiosHeaders, config: {…}, …}
      }).catch(err => {
        console.error(err);
      });
    }
    
    // axios.post(url[, data, config])
    function sendPost() {
      // 全局配置
      axios.defaults.baseURL = 'http://localhost:9000/back_end_post';
      axios.post(
        '/params',
        {
          body_name: 'body'
        },
        {
          headers: {
            'Content-Type': 'application/json',
          },
        }
      ).then(res => {
        console.log(res); // {data: {…}, status: 200, statusText: 'OK', headers: AxiosHeaders, config: {…}, …}
      }).catch(err => {
        console.error(err);
      });
    }
    
    // axios(config)
    function sendAxios() {
      axios({
        url: 'http://localhost:9000/back_end_post/params',
        method: 'POST',
        data: {
          body_name: 'body'
        },
        headers: {
          'Content-Type': 'application/json',
        },
      }).then(res => {
        console.log(res); // {data: {…}, status: 200, statusText: 'OK', headers: AxiosHeaders, config: {…}, …}
      }).catch(err => {
        console.error(err);
      });
    }
    
    // all([request, ...]) & spread((response, ...)=>{})
    function sendAllSpread() {
      axios.defaults.baseURL = 'http://localhost:9000';
      axios.all([
        axios.get('/back_end_get/params?query_name=query'),
        axios.post('/back_end_post/params', {body_name: 'body'}),
      ]).then(axios.spread((response1, response2) => {
        console.log(response1); // {data: {…}, status: 200, statusText: 'OK', headers: AxiosHeaders, config: {…}, …}
        console.log(response2); // {data: {…}, status: 200, statusText: 'OK', headers: AxiosHeaders, config: {…}, …}
      }));
    }
  </script>
</html>